<template>
  <div :class="classes">
    <label :for="'checked' + task.id" :aria-label="'archiveTask-' + task.id" class="checkbox">
      <input type="checkbox" :checked="isChecked" disabled :name="'checked' + task.id" :id="'archiveTask-' + task.id" />
      <span class="checkbox-custom" @click="archiveTask" />
    </label>
    <label :for="'title-' + task.id" :aria-label="task.title" class="title">
      <input type="text" readonly :value="task.title" :id="'title-' + task.id" name="title" placeholder="Input title"
        style="text-overflow: ellipsis;" />
    </label>
    <button v-if="!isChecked" class="pin-button" @click="pinTask" :id="'pinTask-' + task.id"
      :aria-label="'pinTask-' + task.id">
      <span class="icon-star" />
    </button>
  </div>
</template>

<script lang="ts" setup>
import { defineProps } from 'vue';
import type { TaskData } from '@/types/task';

type TaskProps = {
  /** Composition of the task */
  task: TaskData
  /** Event to change the task to archived */
  onArchiveTask: (id: string) => void
  /** Event to change the task to pinned */
  onPinTask: (id: string) => void
}

const props = withDefaults(defineProps<TaskProps>(), {
  task: { id: '', title: '', state: 'TASK_INBOX' },
})

const emit = defineEmits<{
  (e: 'archive-task', id: string): void
  (e: 'pin-task', id: string): void
}>();

/*
 * Computed property for checking the state of the task
 */
const classes = computed(() => ({
  'list-item TASK_INBOX': props.task.state === 'TASK_INBOX',
  'list-item TASK_PINNED': props.task.state === 'TASK_PINNED',
  'list-item TASK_ARCHIVED': props.task.state === 'TASK_ARCHIVED',
}));

/**
 * Computed property for checking the state of the task
 */
const isChecked = computed(() => props.task.state === 'TASK_ARCHIVED');
/**
 * Event handler for archiving tasks
 */
function archiveTask() {
  emit('archive-task', props.task);
}
/**
 * Event handler for pinning tasks
 */
function pinTask() {
  emit('pin-task', props.task);
}
</script>
